<head>
    <title>CatchME - Setup</title>
    <meta content="width=device-width,initial-scale=1,user-scalable=0" name=viewport>
    <link href=./main.css rel=stylesheet>
</head>

<body id="catchme-setup">
    <div id=notification></div>
    <div class=main-wrap>
        <div id=spinner-container></div>
        <div class="container" id="setup">
            <div class=card-container>
                <div class="card horizontal" id=ss>
                    <div id=card-wrapper>
                        <div id=c1>
                            <div class=card-content>
                                <div class="term-title">Terms and Conditions</div>
                                <p>
                                    <b>CatchME</b> is developed by (Herwono W. Wijaya)
                                    <a href="https://twitter.com/HerwonoWr">@HerwonoWr</a>. This project is a proof of concept for testing and educational purposes.
                                    CatchME allows you to perform deauth attack, beacon, probe request flooding, and WiFi
                                    sniffing. CatchME (deauth attack) works by exploiting an old and known (deauth attack)
                                    vulnerability in the 802.11 WiFi protocol. CatchME also allows you to detect Deauth Attack.
                                    CatchME has two operation mode, Attack Mode and Detector Mode, Detector Mode allows you
                                    to detect Deauth Attack.
                                    <br><br>
                                    <b>CatchME</b> is based upon the awesome work of (Stefan Kremser) <a href=https://github.com/spacehuhn/esp8266_deauther>esp8266 Deauther</a> & (Sam Denty) <a href=https://github.com/samdenty99/Wi-PWN>Wi-PWN</a>
                                </p>
                                <br>
                                <p>
                                    <b>WARNING</b>
                                    <br> Use it only against your own networks and devices!. I don't take any responsibility
                                    for what you do with CatchME.
                                    <br>
                                    <br> Please check the legal regulations in your country before using it. Do not redistribute,
                                    advertise or sell of this software as "jammer"!.
                                </p>
                            </div>
                            <div class=card-action onclick=accept()>
                                <a class="button right">Accept</a>
                            </div>
                        </div>
                        <div id=c2>
                            <div class=card-content>
                                <div class=row>
                                    <div class=col-6>
                                        <div class=input-container>
                                            <input id=ssid value=CATCH-ME maxlength=32 minlength=1 placeholder=" " required>
                                            <label for=ssid>CatchME SSID</label>
                                        </div>
                                    </div>
                                    <div class=col-6>
                                        <div class=input-container>
                                            <input id=password value=trytocatchme maxlength=32 minlength=8 placeholder=" " required>
                                            <label for=ssid>Password</label>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class=card-action onclick=cont()>
                                <a class="button right">Continue</a>
                            </div>
                        </div>
                        <div id=c3>
                            <div class=card-content>
                                <div class=row style=text-align:center;padding-top:32px>
                                    <svg class=success-svg viewBox="0 0 24 24">
                                        <path d="M12,16C12.56,16.84 13.31,17.53 14.2,18L12,20.2L9.8,18C10.69,17.53 11.45,16.84 12,16M17,11.2A2,2 0 0,0 15,13.2A2,2 0 0,0 17,15.2A2,2 0 0,0 19,13.2C19,12.09 18.1,11.2 17,11.2M7,11.2A2,2 0 0,0 5,13.2A2,2 0 0,0 7,15.2A2,2 0 0,0 9,13.2C9,12.09 8.1,11.2 7,11.2M17,8.7A4,4 0 0,1 21,12.7A4,4 0 0,1 17,16.7A4,4 0 0,1 13,12.7A4,4 0 0,1 17,8.7M7,8.7A4,4 0 0,1 11,12.7A4,4 0 0,1 7,16.7A4,4 0 0,1 3,12.7A4,4 0 0,1 7,8.7M2.24,1C4,4.7 2.73,7.46 1.55,10.2C1.19,11 1,11.83 1,12.7A6,6 0 0,0 7,18.7C7.21,18.69 7.42,18.68 7.63,18.65L10.59,21.61L12,23L13.41,21.61L16.37,18.65C16.58,18.68 16.79,18.69 17,18.7A6,6 0 0,0 23,12.7C23,11.83 22.81,11 22.45,10.2C21.27,7.46 20,4.7 21.76,1C19.12,3.06 15.36,4.69 12,4.7C8.64,4.69 4.88,3.06 2.24,1Z"></path>
                                    </svg>
                                    <br>
                                    <b class="s-title" style=font-size:18px>Setup complete!</b>
                                    <br>
                                    <span style=font-weight:300>Please reconnect to CatchME network</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <script src=./js/functions.js></script>
        <script>
            function accept() {
                toTop(),
                    document.getElementById("card-wrapper").className = "accept",
                    document.getElementById("ss").setAttribute("style", "max-height:190px"),
                    setTimeout(function () {
                        document.getElementById("c3").className = "away"
                    }, 500)
            }
            function cont() {
                showLoading(),
                    toTop();
                var e = "settingsSave.json";
                e += "?ssid=" + ssid.value,
                    e += "&password=" + password.value,
                    e += "&newUser=false",

                    document.getElementById("ss").removeAttribute("style"),
                    document.getElementById("setup").setAttribute("class", "container setup"),
                    getResponse(e, function (e) {
                        "true" == e ? (vibrate(),
                            autoReload(),
                            getResponse("restartESP.json?", function (e) {
                                "true" == e ? (document.getElementById("ss").className = "card horizontal s-s",
                                    showLoading("hide")) : (notify("Failed to restart CatchME Device!"),
                                        showLoading("hide"))
                            }, function () {
                                notify("Failed to restart CatchME Device!"),
                                    showLoading("hide")
                            })) : (notify("Failed to save settings!"),
                                showLoading("hide"))
                    }, function () {
                        notify("Failed to save settings!"),
                            showLoading("hide")
                    })
            }
            function toTop() {
                try {
                    window.scrollTo({
                        behavior: "smooth",
                        left: 0,
                        top: 10
                    })
                } catch (e) {
                    scroll(0, 0)
                }
            }
            var ssid = getE("ssid"),
                password = getE("password");
            fadeIn();
        </script>
        <style>
            html {
                overflow: scroll;
                overflow-x: hidden
            }

            body {
                transition: background-color .3s ease;
                padding-bottom: 15px;
                overflow-y: initial
            }

            .main-wrap {
                overflow: initial;
                top: 0!important
            }

            .reboot-container,
            footer {
                display: none
            }

            .success-svg {
                opacity: 1;
                height: 90px;
                margin-bottom: 30px
            }

            .show-loading {
                margin-top: 15px!important
            }

            #spinner-container .success-svg {
                display: none
            }

            .container {
                min-height: initial;
                display: table;
                width: 60%;
            }

            .setup {
                width: 30%;
            }

            .card-container {
                margin-top: 75px;
            }

            .card-content b:not(.s-title),
            p,
            .term-title {
                font-family: "Courier New", Courier, monospace!important;
            }

            .card-content p,
            b {
                font-size: 1rem;
                text-align: justify;
                line-height: 1.4
            }

            .term-title {
                text-align: center;
                font-size: 1.5rem;
                margin-bottom: 15px;
            }
        </style>
    </div>
</body>